<template>
  <div>
    <el-tabs v-model="activeName" style="width: 581px">
      <el-tab-pane label="基本设置"  name="first">
        <el-form ref="form"  :rules="rules"  :model="step" label-width="150px">
          <el-form-item label="步骤名称" prop="name">
            <el-input v-model="step.name" placeholder="请输入步骤名称"></el-input>
          </el-form-item >
          <el-form-item label="URL">
            <el-input v-model="step.url" :disabled="step.urlInField=='Y'"></el-input>
          </el-form-item>
          <el-form-item label="从字段中获取URL?">
            <el-checkbox true-label="Y" false-label="N" v-model="step.urlInField"></el-checkbox>
          </el-form-item>
          <el-form-item label="URL字段名">
            <el-select :disabled="step.urlInField=='N'" v-model="step.urlField" >
              <el-option v-for="item in step.availableFields" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="connection超时">
            <el-input-number :min="0" :step="500" v-model="step.connectionTimeout"></el-input-number>
          </el-form-item>
          <el-form-item label="socket超时 ">
            <el-input-number :min="0" :step="500" v-model="step.socketTimeout"></el-input-number>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="参数设置" name="second">
        <el-form ref="form2" label-width="150px">

          <el-button icon="plus" @click="addQueryParam">添加请求参数</el-button>
          <el-button type="primary" @click="step.paramList=fetchFromInputStream()">获取字段</el-button>

          <br><br>
          <el-table :data="step.paramList" stripe border :max-height="250">
            <el-table-column type="index" :width="60"></el-table-column>
            <el-table-column label="名称" :width="190">
              <template scope="scope">
                <div v-if="!scope.row.edit">{{scope.row.name}}</div>
                <div v-else>
                  <el-select v-model="scope.row.name">
                    <el-option v-for="item in step.availableFields" :value="item.name"></el-option>
                  </el-select>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="命名参数" :width="190">
              <template scope="scope">
                <div v-if="!scope.row.edit">{{scope.row.parameter}}</div>
                <div v-else class="control">
                  <el-input v-model="scope.row.parameter"></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="控制" :width="140">
              <template scope="scope">
                <el-row>
                  <el-col :span="12">
                    <el-button size="small" type="info" @click="reverseEditState(scope.$index, scope.row)">编辑</el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row,step.paramList)">删除</el-button>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <br><br>
          <el-button icon="plus" @click="addQueryHeader">添加请求头</el-button>
          <el-button type="primary" @click="step.headerList=fetchFromInputStream()">获取字段</el-button>
          <br><br>
          <el-table :data="step.headerList" stripe border :max-height="250">
            <el-table-column type="index" :width="60"></el-table-column>
            <el-table-column label="名称" :width="190">
              <template scope="scope">
                <div v-if="!scope.row.edit">{{scope.row.name}}</div>
                <div v-else>
                  <el-select v-model="scope.row.name">
                    <el-option v-for="item in step.availableFields" :value="item.name"></el-option>
                  </el-select>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="命名参数" :width="190">
              <template scope="scope">
                <div v-if="!scope.row.edit">{{scope.row.parameter}}</div>
                <div v-else class="control">
                  <el-input v-model="scope.row.parameter"></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="控制" :width="140">
              <template scope="scope">
                <el-row>
                  <el-col :span="12">
                    <el-button size="small" type="info" @click="reverseEditState(scope.$index, scope.row)">编辑</el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row,step.headerList)">删除</el-button>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="响应设置" name="third">
        <el-form ref="form3" label-width="150px">
          <el-form-item label="结果">
            <el-input v-model="step.result.name"></el-input>
          </el-form-item>
          <el-form-item label="HTTP状态码">
            <el-input v-model="step.result.code"></el-input>
          </el-form-item>
          <el-form-item label="响应时间">
            <el-input v-model="step.result.response_time"></el-input>
          </el-form-item>
          <el-form-item label="响应头">
            <el-input v-model="step.result.response_header"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="授权&代理" name="4th">
        <el-form ref="form4" label-width="150px">
          <el-form-item label="HTTP登录名">
            <el-input v-model="step.httpLogin"></el-input>
          </el-form-item>
          <el-form-item label="HTTP密码">
            <el-input v-model="step.httpPassword"></el-input>
          </el-form-item>
          <el-form-item label="代理主机">
            <el-input v-model="step.proxyHost"></el-input>
          </el-form-item>
          <el-form-item label="代理接口">
            <el-input v-model="step.proxyPort"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style scoped lang="scss">
  .el-form-item {
    .el-input,.el-input-number,.el-select{
      width: 350px
    }
  }
</style>
<script>
  import {Steps, Fields} from "../../model/DataModel";
  import StepCommon from "./mixins/StepMixin";

  export default{
    mixins: [StepCommon],
    data(){
      return {
        activeName: "first",
        step: Steps.HTTP(),
      }
    },
    methods: {
      addQueryParam(){
        this.step.paramList.push(Fields.HTTP());
      },
      addQueryHeader(){
        this.step.headerList.push(Fields.HTTP());
      },
      fetchFromInputStream(){
        return this.step.availableFields.map(el => ({name: el.name, parameter: el.name}))
      },
      updateFields(){
          let r=this.step.result;
        this.step.outputFields = [r.name,r.code,r.response_time,r.response_header].filter(el=>el!="");
      }
    }
  }
</script>
